<div id="userCenter">
<div id="myrack" style="display: none;width: 800px">
    <button class="layui-btn layui-btn-normal" id="addBookBtn" onclick="addBook()">添加书籍</button>
    <div id="mybooklist" style="width: 800px;display: flex;flex-wrap: wrap"></div>
</div>
<div id="mywish" style="display: none;">
    <button class="layui-btn layui-btn-normal" id="addWishBtn" onclick="addWishForm()" >添加愿望</button>
    <div id="addWishForm" style="background-color: #ebebeb;border-radius: 5px;padding: 5px;display: none;width: 600px;">
        <div  style="display: inline-block"><label for="wishTitle">书名</label>
            <input class="form-control" type="text" id="wishTitle" style="display: inline-block;width: 200px;"></div>
        <div  style="display: inline-block" ><label for="wishAuthor">作者</label>
            <input  class="form-control" type="text" id="wishAuthor" style="display: inline-block;width: 200px;"></div>
        <button class="layui-btn layui-btn-normal" id="canelAddWish" onclick="sureAddWish()" style="vertical-align: baseline" >确认添加</button>
    </div>
    <div id="mywishlist" style="width: 800px;display: flex;flex-wrap: wrap"></div>
</div>
<div id="myboard" style="display: none;overflow: auto"></div>
<div id="messageBox" style="display: none">
    <div id="messageBtnGroup" class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="width: 800px">
        <ul class="layui-tab-title">
            <li  class="col-6 layui-this" onclick="toSendMessageList()">已发出的消息</li>
            <li  class="col-6" onclick="toReceiveMessageList()">已收到的消息</li>
        </ul>
    </div>
    <div id="sendMessageList">
    </div>
    <div id="receiveMessageList" style="display: none"></div>
</div>
</div>

<script>
    $(function () {
        getmyRack();
    })
    function getmyRack() {
        clearContent()
        $("#myrack").css('display','block')
        getRack("user",mybooklist)
    }
    function toSendMessageList() {
        $("#receiveMessageList").css('display','none')
        $("#sendMessageList").css('display','block')
        $.ajax({
            url:"message/sentMessageList",
            type:'get',
            datatype:'json',
            success:function (data) {
                var sendmessagebox = $("#sendMessageList")
                sendmessagebox.empty()
                var friendsendlist = data.friendrequestlist
                var exchange_request_list = data.exchange_request_list
                for(var i =0;i<friendsendlist.length;i++) {
                    var friendsendnode = $("<div class=\"messageItems\" id="+friendlist[i].id+">\n" +
                        "<p class=\"col-4\">申请类型:<span>好友申请</span></p>" +
                        "<p class=\"col-3\">发送给<span >"+friendsendlist[i].receiver+"</span></p>" +
                        "<p class=\"col-5 \" >发送时间:<span>"+friendsendlist[i].sendtime+"</span></p>\n" +
                        "<p class=\"col-7\">附加信息:<span>"+friendsendlist[i].message+"</span></p>" +
                        "<p class=\"col-3\" >当前状态:<span>"+friendsendlist[i].status+"</span></p>\n" +
                        "<button class=\"layui-btn col-2\" type=\"button\" >撤回申请</button>\n" +
                        "</div>")
                    sendmessagebox.append(friendsendnode)
                }
                for(var i =0;i<exchange_request_list.length;i++) {
                    var exchange_request_node = $("<div class=\"messageItems\" id="+exchangelist[i].id+">\n" +
                        "<p class=\"col-4\">申请类型:<span>书籍交换</span></p>" +
                        "<p class=\"col-3\">发送给:<span>"+exchange_request_list[i].receiver+"</span></p>" +
                        "<p class=\"col-5 \" >发送时间:<span>"+exchange_request_list[i].sendtime+"</span></p>\n" +
                        "<p class=\"col-12\" style='text-align: center'><span style='color: #2F4056;font-weight: bolder'>《"+exchange_request_list[i].bookb+"》</span><span class='icon iconfont icon-changjiantou-you'></span><span style='color:#2F4056;font-weight: bolder'>《"+exchange_request_list[i].booka+"》</span></p>" +
                        "<p class=\"col-7\">附加信息:<span>"+exchange_request_list[i].message+"</span></p>" +
                        "<p class=\"col-3\" >当前状态:<span>"+exchange_request_list[i].status+"</span></p>\n" +
                        "<button class=\"layui-btn col-2\" type=\"button\" >撤回申请</button>\n" +
                        "</div>")
                    sendmessagebox.append(exchange_request_node)
                }
            }
        })
    }
    function toReceiveMessageList() {
        $("#receiveMessageList").css('display','block')
        $("#sendMessageList").css('display','none')
        $.ajax({
            url:"message/receiveMessageList",
            type:'get',
            datatype:'json',
            success:function (data) {
                var receivemessagebox = $("#receiveMessageList")
                receivemessagebox.empty()
                var friendlist = data.friend_receive_list
                var exchangelist = data.exchange_receive_list
                for(var i =0;i<friendlist.length;i++) {
                    var node = $("<div class=\"messageItems\" id="+friendlist[i].id+">\n" +
                        "<p class=\"col-4\">申请类型:<span>好友申请</span></p>" +
                        "<p class=\"col-3\">来自:<span >"+friendlist[i].requester+"</span></p>" +
                        "<p class=\"col-5 \" >发送时间:<span>"+friendlist[i].sendtime+"</span></p>\n" +
                        "<p class=\"col-9\">附加信息:<span>"+friendlist[i].message+"</span></p>" +
                        "<div class='layui-btn-group col-3' style='text-align: right'> " +
                        "<button class=\"layui-btn\" type=\"button\" >接受</button>\n" +
                        "<button class=\"layui-btn\" type=\"button\" >拒绝</button></div>\n" +
                        "</div>")
                    receivemessagebox.append(node)
                }
                for(var i =0;i<exchangelist.length;i++) {
                    var node = $("<div class=\"messageItems\" id="+exchangelist[i].id+">\n" +
                        "<p class=\"col-4\">申请类型:<span>书籍交换</span></p>" +
                        "<p class=\"col-3\">来自<span >"+exchangelist[i].requester+"</span></p>" +
                        "<p class=\"col-5 \" >发送时间:<span>"+exchangelist[i].sendtime+"</span></p>\n" +
                        "<p class=\"col-12\" style='text-align: center'><span style='color: #2F4056;font-weight: bolder'>《"+exchangelist[i].bookb+"》</span><span class='icon iconfont icon-changjiantou-you'></span><span style='color:#2F4056;font-weight: bolder'>《"+exchangelist[i].booka+"》</span></p>" +
                        "<p class=\"col-9\">附加信息:<span>"+exchangelist[i].message+"</span></p>" +
                        "<div class='layui-btn-group col-3' style='text-align: right'><button class=\"layui-btn\" type=\"button\" >接受</button>\n" +
                        "<button class=\"layui-btn\" type=\"button\" >拒绝</button></div>" +
                        "</div>")
                    receivemessagebox.append(node)
                }
            }
        })
    }
    function toMessageBox() {
        clearContent()
        $("#messageBox").css('display','block')
        toSendMessageList()
    }
    function getmyWish() {
        clearContent()
        $("#mywish").css('display','block')
        $.ajax({
            url:"wish/getMyWishList"
            ,type:"get"
            ,datatype:"JSON"
            ,success:function(data) {
                var wishlist = data.wishlist
                var listbox = $("#mywishlist")
                listbox.empty()
                if (wishlist.length !== 0) {
                    for (var j = 0, len = wishlist.length; j < len; j++) {
                        var ele = $("<div class='books card'></div>")
                        var name = $(buildHTML("p", wishlist[j].title, {
                            "class": "name-rack"
                        }));
                        var author = $(buildHTML("p", wishlist[j].author, {
                            "class": "author-rack"
                        }));
                        var cover = $(buildHTML("img", {
                            "src": "/static/covers/defaultcover.jpg" ,
                            "class": "covers-rack card-img-top"
                        }))
                        ele.append(cover)
                        ele.append(name);
                        ele.append(author);
                        listbox.append(ele);
                    }
                } else {
                    var nulltext = $(buildHTML('p','暂无书籍',{
                        'class':'nullnode'
                    }))
                    listbox.append(nulltext)
                }
            }
        })
    }
    function addWishForm() {
        $("#mywishlist .nullnode").remove()
        if(addWishstatus===0){
            $("#addWishForm").slideToggle()
            $("#addWishBtn").attr('class','layui-btn layui-btn-danger').text('取消添加')
            addWishstatus =1
        }
        else if (addWishstatus===1){
            $("#addWishForm").slideToggle()
            $("#addWishBtn").attr('class','layui-btn layui-btn-normal').text('添加愿望')
            $("#wishTitle,#wishAuthor").val("")
            addWishstatus =0
        }
    }
    function sureAddWish() {
        $.ajax({
            url:"wish/addWish",
            type:'post',
            data:{'title':$("#wishTitle").val(),'author':$("#wishAuthor").val()},
            datatype:'json',
            success:function (data) {
                if(data.state==="添加完成"){
                    popMessage(data.state)
                    addWishForm()
                    addWishstatus =0
                }
                else {
                    popMessage(data.state)
                }
            }
        })
    }
    function addBook() {
        $("#mybooklist .nullnode").remove()
        layer.open({
            type:1,
            title:'添加书籍',
            skin:'layui-layer-molv',
            area:['520px','500px'],
            content:"<form enctype=\"multipart/form-data\" id='addBookForm'>" +
                "<h3 style='text-align: center;margin: 30px 0px'>填写书籍信息</h3>"+
                "<div class='form-group'>" +
                "<div class='col-sm-3 custom-control-label' style='display: inline-block;text-align: center'><label for='author'>书名</label></div>" +
                "<div class='col-sm-8' style='display: inline-block'><input  required='required'  class='form-control' type='text' name='title' id='title'></div>" +
                "</div>" +
                "<div class='form-group'>" +
                "<div class='col-sm-3 custom-control-label' style='display: inline-block;text-align: center'><label for='author'>作者</label></div>" +
                "<div class='col-sm-8' style='display: inline-block'><input required='required'  class='form-control' type='text' name='author' id='author'></div>" +
                "</div>" +
                "<div class='form-group'>" +
                "<div class='col-sm-3 custom-control-label' style='display: inline-block;text-align: center'><label for='cover'>书籍封面</label></div>" +
                "<div class='col-sm-8' style='display: inline-block'><input  type='file' name='cover' id='cover'></div>" +
                "</div>" +
                "<div class='form-group'>" +
                "<div class='col-sm-3 custom-control-label' style='display: inline-block;text-align: center'><label for='press'>出版社</label></div>" +
                "<div class='col-sm-8' style='display: inline-block'><input  class='form-control'  type='text' name='press' id='press'></div>" +
                "</div>" +
                "<div class='form-group'>" +
                "<div class='col-sm-3 custom-control-label' style='display: inline-block;text-align: center;vertical-align: top'><label for='intro'>书籍简介</label></div>" +
                "<div class='col-sm-8' style='display: inline-block'><textarea  class='form-control'  type='text' name='intro' id='intro' maxlength='100'></textarea></div>" +
                "</div>",
            btn: ['提交','取消'],
            btnAlign:'c',
            yes:function (index, layer) {
                var formdata=new FormData($("#addBookForm")[0])
                $.ajax({
                    url:"book/addBook",
                    type:'post',
                    datatype:'json',
                    data:formdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success:function (data) {
                        popMessage(data.state)
                        createBookEle(data.book,$("#mybooklist"));
                        layer.close(index)
                    }
                })
            }
        })
    }

</script>